<template>
  <a-locale-provider :locale="locale">
    <div id="app">
      <router-view/>
    </div>
  </a-locale-provider>
</template>

<script>

  import { zh_CN } from '@/local'
  import { deviceEnquire, DEVICE_TYPE } from '@/utils/device'

  export default {
    data () {
      return {
        locale: zh_CN
      }
    },

    mounted () {
      const { $store } = this
      deviceEnquire(deviceType => {
        switch (deviceType) {
          case DEVICE_TYPE.DESKTOP:
            $store.commit('TOGGLE_DEVICE', DEVICE_TYPE.DESKTOP)
            $store.dispatch('setSidebar', true)
            break
          case DEVICE_TYPE.TABLET:
            console.log('tablet')
            $store.dispatch('ToggleDevice', DEVICE_TYPE.TABLET)
            $store.dispatch('setSidebar', false)
            break
          case DEVICE_TYPE.MOBILE:
          default:
            $store.commit('TOGGLE_DEVICE', DEVICE_TYPE.MOBILE)
            $store.dispatch('setSidebar', true)
            break
        }
        console.log('deviceType', deviceType)
      })

      // 移除动画
      document.getElementById('preloadingWrapper').remove()
    }
  }
</script>

<style>
  #app {
    height: 100%;
  }
</style>
